<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="text item">
        <el-form :inline="true">
          <el-form-item label="学科名称">
            <el-input v-model='q.subjectName'></el-input>
          </el-form-item>
          <el-form-item>

            <el-button style='padding: 9px 15px' @click='removeValue'>
              清除
            </el-button>

          </el-form-item>
          <el-form-item>

            <el-button type='primary' style='padding: 9px 15px' @click='check'>搜索</el-button>

          </el-form-item>

        </el-form>
        <div>
          <el-button type="success" icon="el-icon-edit" style='padding: 9px 15px' @click='handelAdd'>新增学科</el-button>

        </div>
      </div>
      <div class='inf'>
        <el-alert :title='title' type="info" show-icon>

        </el-alert>
      </div>
      <div>
        <template>
          <el-table style="width: 100%" :data="subjectForm.items">
            <el-table-column label='序号' type="index" width='48px'>
            </el-table-column>
            <el-table-column prop='subjectName' label="学科名称" width="80px">
            </el-table-column>
            <el-table-column prop='username' label="创建者" width="80px">
            </el-table-column>
            <el-table-column prop='addDate' label="创建日期" width="160px">
            </el-table-column>
            <el-table-column prop='isFrontDisplay' label="前台是否显示" width="80px">
            </el-table-column>
            <el-table-column prop='tags' label="标签" width="80pxpx">
            </el-table-column>
            <el-table-column prop='totals' label="二级目录" width="80px">
            </el-table-column>
            <el-table-column prop='totals' label="题目数量" width="80px">
            </el-table-column>
            <el-table-column label="操作" width='240px'>
              <template slot-scope="{row}">
                <el-button size="medium" type='text' @click='jumpClass'>学科分类</el-button>
                <el-button size="medium" type="text" @click='jumpTags'>学科标签</el-button>

                <el-button size="medium" type='text' @click='handelChange(row)'>修改</el-button>

                <el-button size="medium" type="text" @click='handleDelete(row)'>删除</el-button>
                <subjectsadd :isShowDialog='isShowDialog' @cancel='isShowDialog=false' @new='newList' @reset='resetList' :ruleForm="ruleForm" />
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div>
        <el-pagination background layout="->,prev,pager,next,sizes,jumper" :total="total" :page-sizes="[5, 10, 20, 50]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page='q.page' :page-size='q.pagesize'>
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
import { list, remove, detail } from '../../api/hmmm/subjects'
import subjectsadd from '../../module-hmmm/components/subjects-add.vue'

export default {
  name: 'subjects',
  components: {
    subjectsadd

  },
  data () {
    return {
      ruleForm: {
        subjectName: '',
        isFrontDisplay: false
      },

      // 学科列表
      subjectForm: {},
      q: {
        pagesize: 10,
        page: 0,
        subjectName: ''
      },

      total: 0,

      // 控制弹窗显示的标志位
      isShowDialog: false

    }
  },
  computed: {
    title () {
      return `数据一共有${this.total}条`
    }
  },
  created () {
    this.getList()
  },

  methods: {
    handleSizeChange (val) {
      // 页面条数变化
      this.q.pagesize = val
      this.getList()
    },
    resetList () {
      this.ruleForm = this.$options.data().ruleForm
    },
    handleCurrentChange (val) {
      // 页码变化
      this.q.page = val
      this.getList()
    },
    // 刷新列表
    newList () {
      this.getList()
    },
    // 获取学科列表
    async getList () {
      const { data } = await list(this.q)
      console.log(data)
      this.subjectForm = data
      this.total = data.counts
      // if(data.items.length===0){

      // }
    },
    removeValue () {
      this.q.subjectName = ''
    },
    // 搜索
    async check () {
      const res = await list(this.q)
      console.log(res)
      this.getList()
    },
    // 跳转
    jumpClass () {
      this.$router.push('/subjects/directorys')
    },
    jumpTags () {
      this.$router.push('/subjects/tags')
    },
    // 添加学科
    handelAdd () {
      this.isShowDialog = true
    },
    // 修改学科
    async handelChange (obj) {
      // 点击修改发请求获取数据
      this.isShowDialog = true
      // 获取学科数据
      const ret = await detail(obj)
      console.log(ret)
      if (ret.data.isFrontDisplay === 1) {
        ret.data.isFrontDisplay = true
      } else {
        ret.data.isFrontDisplay = false
      }
      this.ruleForm = ret.data
    },
    // 删除学科
    async handleDelete (obj) {
      const ret = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(ret)
      if (ret === 'cancel') return
      // 删除
      try {
        const res = await remove(obj)
        console.log(res)
        if (res.status === 200) {
          this.$message.success('删除学科成功')
          // 关闭关闭弹窗
          this.isShowDialog = false
          this.getList()
        } else {
          this.$message.error('删除学科失败')
        }
      } catch (err) {
        this.$message.error('error submit')
        return false
      }
    }

  }

}

</script>

<style scoped lang='less'>
* {
  margin: 0;
  padding: 0;
}
.inf {
  padding: 8px 16px;
  margin-bottom: 15px;
}

.container {
  padding: 0 10px;
  box-sizing: border-box;
}
.text {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  margin: 10px 0;
}
</style>
